
 <!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  
    <title>关于react-native的demo如何运行起来... | 云淡天蓝’Blog</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1">
    
    <meta name="author" content="CuiHongbao">
    
    <meta name="description" content="##1.打开终端输入：git clone https://github.com/facebook/react-native.git下载完成后，在目录中存在下载后的相关文件。
##2.终端输入：cd react-native &amp;amp;&amp;amp; npm install 出现提示，npm comman">
    
    
    
    
    <link rel="alternative" href="/Tinnypp/atom.xml" title="云淡天蓝’Blog" type="application/atom+xml">
    
    
    <link rel="icon" href="/img/favicon.ico">
    
    
    <link rel="apple-touch-icon" href="/img/myLogo.png">
    <link rel="apple-touch-icon-precomposed" href="/img/myLogo.png">
    

  
    <link href="/css/font-awesome.min.css" rel="stylesheet">
    
  

    <link rel="stylesheet" href="/css/style.css">
    <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?d182ed77fc48758bf45a33835ee35745";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

      <script type="text/javascript">
  (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
  (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
  e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
  })(window,document,'script','//s.swiftypecdn.com/install/v1/st.js','_st');

  _st('install','.............Add your swiftype userID...............');
</script>
</head>

  <body>
    <header>
      <div>
		
			<div id="textlogo">
				<h1 class="site-name"><a href="/" title="云淡天蓝’Blog">云淡天蓝’Blog</a></h1>
				<h2 class="blog-motto"></h2>
			</div>
			<div class="navbar"><a class="navbutton navmobile" href="#" title="菜单">
			</a></div>
			<nav class="animated">
				<ul>
                    <ul>
					 
						<li><a href="/">首页</a></li>
					
						<li><a href="/archives">归档</a></li>
					
						<li><a href="/categories/About">关于</a></li>
					
					<li>
					
						<form class="search" action="/search/index.html" method="get" accept-charset="utf-8">
						<label>Search</label>
						<input type="text" id="st-search-inpu" maxlength="20" placeholder="Search" />
						</form>
					
					</li>
                <!--<li><div class="closeaside"><a class="closebutton" href="#" title="隐藏侧边栏"></a></div></li>-->

				</ul>
			</nav>	
</div>
    </header>
    <div id="container" class="clearfix">
      <div id="main" class="post" itemscope itemprop="blogPost">
	<article itemprop="articleBody"> 
		<header class="article-info clearfix">
  <h1 itemprop="name">
    
      <a href="/2016/09/19/react-native/" title="关于react-native的demo如何运行起来..." itemprop="url">关于react-native的demo如何运行起来...</a>
  </h1>
  <p class="article-time">
    <time datetime="2016-09-19T07:48:27.000Z" itemprop="datePublished">2016-09-19</time>
  </p>
</header>
	<div class="article-content">
		
		
		<div id="toc" class="toc-article">
			<strong class="toc-title"></strong>
		
		</div>
		
		<p>##1.打开终端输入：git clone <a href="https://github.com/facebook/react-native.git下载完成后，在" target="_blank" rel="external">https://github.com/facebook/react-native.git下载完成后，在</a><br><img src="http://upload-images.jianshu.io/upload_images/2658715-0e28dded6f81eabe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="QQ20160919-0.png">目录中存在下载后的相关文件。</p>
<p>##2.终端输入：cd react-native &amp;&amp; npm install<br> 出现提示，npm command no found 因为你的mac中 npm没有安装</p>
<p>###npm是什么？<br>    <li>NPM的全称是Node Package Manager ，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准</li><li></li></p>
<p>###如何安装npm呢？<br>一：如果你安装了Homebrew<br>如何安装Homebrew见这里：<a href="http://brew.sh/index_zh-cn.html" target="_blank" rel="external">http://brew.sh/index_zh-cn.html</a></p>
<p>直接使用命令：</p>
<pre><code>brew install node
</code></pre><p>二：直接从官网上下载安装<br>点击进入网址，<a href="https://nodejs.org/en/#download" target="_blank" rel="external">https://nodejs.org/en/#download</a><br><img src="http://upload-images.jianshu.io/upload_images/2658715-d79ef78a0d40890d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="QQ20160919-1.png"><br>点击下载“Current”,下载完成后执行*.pkg安装完成即可。<br>安装完成后，就可以运行React-Native Examples下的demo了。<br>ps:如果通过终端命令下载不成功或是下载50%重新下载的导致下载的下载两次的如下图所示：<br><img src="http://upload-images.jianshu.io/upload_images/2658715-1db0da3e691a4f38.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="QQ20160919-2.png"></p>
<p>则需要删除目录中的react-native，否则运行demo时会出现如下错误</p>
<pre><code>Failed to build DependencyGraph: @providesModule naming collision:
 Duplicate module name: AppEventsTest
 Paths: /Users/Founder/react-native/react-native/IntegrationTests/AppEventsTest.js collides with /Users/Founder/react-native/IntegrationTests/AppEventsTest.js
 This error is caused by a @providesModule declaration with the same name across two different files.
 Error: @providesModule naming collision:
 Duplicate module name: AppEventsTest
 Paths: /Users/Founder/react-native/react-native/IntegrationTests/AppEventsTest.js collides with /Users/Founder/react-native/IntegrationTests/AppEventsTest.js
 This error is caused by a @providesModule declaration with the same name across two different files.
at HasteMap._updateHasteMap (/Users/Founder/react-native/packager/react-packager/src/node-haste/DependencyGraph/HasteMap.js:155:13)
at module.getName.then.name (/Users/Founder/react-native/packager/react-packager/src/node-haste/DependencyGraph/HasteMap.js:115:31)
Process terminated. Press &lt;enter&gt; to close the window
</code></pre><p>如上述步骤，React-Native的demo就可以运行起来了。<br>参考文档：<a href="https://github.com/facebook/react-native" target="_blank" rel="external">facebook_github</a></p>
  
	</div>
		<footer class="article-footer clearfix">

  <div class="article-tags">
  
  <span></span> <a href="/tags/react-native/">react-native</a>
  </div>


<div class="article-categories">
  <span></span>
  <a class="article-category-link" href="/categories/原创总结/">原创总结</a>
</div>



<div class="article-share" id="share">

  <div data-url="http://yoursite.com/2016/09/19/react-native/" data-title="关于react-native的demo如何运行起来... | 云淡天蓝’Blog" data-tsina="null" class="share clearfix">
  </div>

</div>
</footer>   	       
	</article>
	
<nav class="article-nav clearfix">
 
 <div class="prev" >
 <a href="/2016/09/22/猎豹_interView/" title="一些基础的面试题">
  <strong>新一篇:</strong><br/>
  <span>
  一些基础的面试题</span>
</a>
</div>


</nav>

	
<section class="comment">
	
	<div class="ds-thread" data-title="关于react-native的demo如何运行起来..." data-thread-key="react-native" data-author-key="CuiHongbao" data-url="http://yoursite.com/post/react-native"></div>
	
</section>


</div>  
    </div>
    <footer><div id="footer" >
	<div class="copyright">
		<span>Powered by <a href="https://github.com/hexojs/hexo">Hexo</a> and theme by 
		<a href="https://github.com/levonlin/Tinnypp">Tinnypp</a>.</span>
		
			<span>© 云淡天蓝</span>
		
	<div>
</div></footer>
    <script src="/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
  //back to top
  function backToTop(){
    var buttonHTML = $("<a href=\"#top\" id=\"back-top\">" + "<span>Back to Top</span></a>");
    buttonHTML.appendTo($("body"));
    var buttonToTop = $("#back-top");
    // hide #back-top first
    buttonToTop.hide();

    // fade in #back-top
    $(function() {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 200) {
                buttonToTop.fadeIn();
            } else {
                buttonToTop.fadeOut();
            }
        });
        // scroll body to 0px on click
        buttonToTop.click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
  }
  backToTop();

  $('.navbar').click(function(){
    $('header nav').toggleClass('shownav');
  });
  var myWidth = 0;
  function getSize(){
    if( typeof( window.innerWidth ) == 'number' ) {
      myWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth) {
      myWidth = document.documentElement.clientWidth;
    };
  };
  var m = $('#main'),
      a = $('#asidepart'),
      c = $('.closeaside'),
      ta = $('#toc.toc-aside');
  $(window).resize(function(){
    getSize(); 
    if (myWidth >= 1024) {
      $('header nav').removeClass('shownav');
    }else
    {
      m.removeClass('moveMain');
      a.css('display', 'block').removeClass('fadeOut');
        
    }
  });

  var show = true;
  c.click(function(){
    if(show == true){
        a.addClass('fadeOut').css('display', 'none');
        ta.css('display', 'block').addClass('fadeIn');
        m.addClass('moveMain');  
    }else{
        a.css('display', 'block').removeClass('fadeOut').addClass('fadeIn');     
        ta.css('display', 'none'); 
        m.removeClass('moveMain');
        $('#toc.toc-aside').css('display', 'none');
    }
    show = !show;
  });
});
</script>

<script type="text/javascript">
$(document).ready(function(){ 
  var ai = $('.article-content>iframe'),
      ae = $('.article-content>embed'),
      t  = $('#toc'),
      h  = $('article h2')
      ah = $('article h2'),
      ta = $('#toc.toc-aside'),
      o  = $('.openaside'),
      c  = $('.closeaside');
  if(ai.length>0){
    ai.wrap('<div class="video-container" />');
  };
  if(ae.length>0){
   ae.wrap('<div class="video-container" />');
  };
  if(ah.length==0){
    t.css('display','none');
  }else{

    $(window).scroll(function(){
      ta.css("top",Math.max(140,240-$(this).scrollTop()));
    });
  };
});
</script>


<script type="text/javascript">
$(document).ready(function(){ 
  var $this = $('.share'),
      url = $this.attr('data-url'),
      encodedUrl = encodeURIComponent(url),
      title = $this.attr('data-title'),
      tsina = $this.attr('data-tsina');
  var html = [
  '<a href="#" class="overlay" id="qrcode"></a>',
  '<div class="qrcode clearfix"><span>扫描二维码分享到微信朋友圈</span><a class="qrclose" href="#share"></a><strong>Loading...Please wait</strong><img id="qrcode-pic" data-src="http://s.jiathis.com/qrcode.php?url=' + encodedUrl + '"/></div>',
  '<a href="#textlogo" class="article-back-to-top" title="Top"></a>',
  '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
  '<a href="#qrcode" class="article-share-qrcode" title="QRcode"></a>',
  '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
  '<a href="http://service.weibo.com/share/share.php?title='+title+'&url='+encodedUrl +'&ralateUid='+ tsina +'&searchPic=true&style=number' +'" class="article-share-weibo" target="_blank" title="Weibo"></a>',
  '<span title="Share to"></span>'
  ].join('');
  $this.append(html);
  $('.article-share-qrcode').click(function(){
    var imgSrc = $('#qrcode-pic').attr('data-src');
    $('#qrcode-pic').attr('src', imgSrc);
    $('#qrcode-pic').load(function(){
        $('.qrcode strong').text(' ');
    });
  });
});     
</script>


<script type="text/javascript">
  var duoshuoQuery = {short_name:"tinnypp"};
  (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = '//static.duoshuo.com/embed.js';    //change to ds.src = '/js/embed.js'; to add useragent for duoshuo
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
    || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
</script> 



<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" media="screen" type="text/css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
  $('.article-content').each(function(i){
    $(this).find('img').each(function(){
      if ($(this).parent().hasClass('fancybox')) return;
      var alt = this.alt;
      if (alt) $(this).after('<span class="caption">' + alt + '</span>');
      $(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox"></a>');
    });
    $(this).find('.fancybox').each(function(){
      $(this).attr('rel', 'article' + i);
    });
  });
  if($.fancybox){
    $('.fancybox').fancybox();
  }
}); 
</script>

<script type="text/javascript">
  function footerPosition() {
    var contentHeight = document.documentElement.scrollHeight,
        winHeight = window.innerHeight;
    if(contentHeight <= winHeight) {
      $('footer').addClass('fixed-bottom');
    } else {
      $('footer').removeClass('fixed-bottom');
    }
  }
  footerPosition();
  $(window).resize(footerPosition);
</script>


  </body>
</html>
